<template>
	<view>
		<view class="topImg"></view>
		<!-- <view class="add">
			<view class="btn" @tap="addButton">新增</view>
		</view> -->
		<view class="formClass">
			<u-form :model="form" ref="uForm">
				<u-form-item label="金属种类:" label-width='150' class="labelStyle">
					<view class="labelStyle">
						<view style="width: 250rpx;height: 50rpx;margin-bottom: 20rpx;font-size: 28rpx;" v-model="form.type" @tap="show = true">
							{{typeLabel}}
							<!-- <u-picker mode="selector" v-model="show" @confirm="selectType" :default-selector="[0]" :range="typeList"></u-picker> -->
							<u-select v-model="show" :list="typeList" @confirm="selectType"></u-select>
						</view>
						<image src="../../static/type.png" style="width: 40rpx;height: 40rpx;" mode="aspectFit"></image>
					</view>
				</u-form-item>
				<u-form-item label="分类:" label-width='100' class="labelStyle">
					<view class="labelStyle">
						<u-input v-model="form.fenlei"  placeholder="选填" placeholder-style="font-size:24rpx;" />
						<image src="../../static/fenlei.png" style="width: 40rpx;height: 40rpx;" mode="aspectFit"></image>
					</view>
				</u-form-item>
				<u-form-item label="名称:" label-width='100' class="labelStyle">
					<view class="labelStyle">
						<u-input v-model="form.name" placeholder="选填" placeholder-style="font-size:24rpx;" />
						<image src="../../static/name.png" style="width: 40rpx;height: 40rpx;" mode="aspectFit"></image>
					</view>
				</u-form-item>
				<u-form-item label="重量:" label-width='100' class="labelStyle" prop="weight">
					<view class="labelStyle">
						<u-input v-model="form.weight" placeholder="必填/kg" placeholder-style="font-size:24rpx;" />
						<image src="../../static/weight.png" style="width: 40rpx;height: 40rpx;" mode="aspectFit"></image>
					</view>
				</u-form-item>
				<u-form-item label="照片上传:" label-width='150' class="labelStyle">
					<view style="display: flex;flex-wrap: nowrap;align-items: center;">
						
						<view v-if="lists != ''">
							<u-popup v-model="showImg" mode="center">
								<image :src="imgUrl" style="width: 90vw;height: 50vh;" mode="aspectFit"></image>
							</u-popup>
							<image @tap="scan(lists)" :src="lists"  style="width: 100rpx;height: 100rpx;margin-right: 10rpx;" mode="aspectFit"></image>
							<image src="../../static/delte.png" style="width: 30rpx;height: 30rpx;position: relative;right: 20rpx;bottom: 70rpx;" @tap="del(lists)" mode="aspectFit"></image>
						</view>
						<view @tap="upload" v-if="showUpload">
							<image src="../../static/upload.png" style="width: 100rpx;height: 100rpx;margin-right: 10rpx;" mode="aspectFit"></image>
						</view>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<view class="twoBtn">
			<view class="left" @tap="goBack">返回</view>
			<view class="left" @tap="submit">下一步</view>
		</view>
	</view>
</template>

<script>
	import config from '@/utils/config.js';
	export default {
		data() {
			return {
				showUpload:true,
				show:false,
				lists:'',
				form: {
					type: "",
					fenlei: '',
					weight: '',
					name: '',
				},
				typeList: [],
				header: {
				  appToken: uni.getStorageSync('token'),
				},
				allType:[],   //存放下拉框的所有内容，用来查找选择的id
				typeLabel:"",
				rules: {
					weight: [
						{
							required: true, 
							message: '请输入重量', 
							trigger: 'change'
						},
						// 正则判断为字母或数字
						{
							pattern: /^[0-9]*$/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能输入数字'
						},
					]
				},
				addDataList:[],
				showImg:false,
				imgUrl:"",
			}
		},
		computed:{
			 action() {
				 return config.host + '/huishou/fast/fastDFSUpload'
			 }
		},
		onLoad(option) {
			if(Object.keys(option).length != 0){
				this.addDataList = JSON.parse(option.list);
			}
		},
		onShow(){
			this.getSelectTypeList();
			this.getToken();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			scan(url){
				this.showImg = true;
				this.imgUrl = url;
			},
			del(url){
				this.lists = ''
				if(this.lists == ""){
					this.showUpload = true;
				}
			},
			upload(){
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
				        uni.uploadFile({
				            url: config.host + '/huishou/fast/fastDFSUpload', //仅为示例，非真实的接口地址
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'user': 'test'
				            },
				            success: (uploadFileRes) => {
								// this.lists.push(JSON.parse(uploadFileRes.data).item);
								this.lists = JSON.parse(uploadFileRes.data).item;
								console.log(this.lists,"0000=======")
								if(this.lists != ""){
									this.showUpload = false;
								}else {
									this.showUpload = true;
								}
				            }
				        });
				    }
				});
				
			},
			getToken(){
				uni.request({
					url: config.host + '/huishou/pcLogin/getAppLoginInfo', //接口地址。
					data: {
						token: uni.getStorageSync('token')
					},
					method: 'POST',
					header: {
						'content-type': 'application/json;charset=UTF-8'
					},
					success: (res) => {
						if(Object.keys(res.data.item).length == 0){
							uni.showToast({
								icon: 'none',
								title: '身份已过期，请重新登录！'
							});
							setTimeout(() => {
								uni.navigateTo({
									url: '../login/index'
								})
							}, 800);
							
						}else{
							
						}
					},
					fail: (err) => {
						uni.showToast({
							icon: 'none',
							title: '网络异常,请稍后重试'
						});
					}
				});
			},
			getSelectTypeList(){  
				this.typeList = [];
				uni.request({
					url: config.host + '/huishou/refuseClassification/queryAll', //接口地址。
					data: {},
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						let obj = {};
						if (res.data.code == 200) {
							res.data.itemList.forEach((item, i) => {
								obj.label = res.data.itemList[i].classification;
								obj.value = res.data.itemList[i].id;
								uni.setStorage({
									key: 'obj',
									data: obj
								});
								this.typeList.push(uni.getStorageSync('obj'));
								console.log(this.typeList,"0000")
							});
						}
					},
					fail: err => {
						uni.showToast({
							icon: 'none',
							title: '网络异常,请稍后重试'
						});
					}
				});
			},
			selectType(e){
				this.form.type = e[0].value;
				this.typeLabel = e[0].label;
			},
			goBack(){
				uni.navigateTo({
					url:"../info/index"
				})
			},
			submit(){
				if(this.typeLabel == ''){
					uni.showToast({
						icon: 'none',
						title: '请选择金属种类'
					});
				}else{
					this.$refs.uForm.validate(valid => {
							if (valid) {
								let obj = {};
								obj.weight = this.form.weight;
								obj.one = this.form.type;
								obj.picture = this.lists;
								obj.oneName = this.typeLabel;
								obj.twoName = this.form.fenlei;
								obj.threeName = this.form.name;
								this.addDataList.push(obj);
								// console.log(this.addDataList,"000000")
								uni.navigateTo({
									url:"../info/index?list="+JSON.stringify(this.addDataList)
								})
								
							} else {
								
							}
						});
						
					}
				}
		}
	}
</script>

<style lang="scss">
	@import url("./css/index.css");
</style>
<style>
	/* .u-input{
		border: 1px solid red !important;
		width: 60% !important; 
	} */

</style>
